<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('预算、预测、实际回款周汇总')" />
    <link th:href="@{/ajax/libs/layui/css/layui.css}" rel="stylesheet"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 select-table table-striped table-responsive">
            <div class="demoTable ">
                项目编号：
                <div class="layui-inline">
                    <input class="layui-input" name="contractNo" id="contractNo" autocomplete="off">
                </div>
                &nbsp;&nbsp;&nbsp;项目名称：
                <div class="layui-inline">
                    <input class="layui-input" name="contractName" id="contractName" autocomplete="off">
                </div>
                &nbsp;&nbsp;&nbsp;销售人员：
                <div class="layui-inline">
                    <select id="xsPrincipalName">
                        <option value=''>请选择</option>
                        <option value='Eric'>Eric</option>
                        <option value='Andy'>Andy</option>
                        <option value='Anne'>Anne</option>
                        <option value='Eric'>Eric</option>
                        <option value='Hanny'>Hanny</option>
                        <option value='Kasi'>Kasi</option>
                        <option value='Kelly'>Kelly</option>
                        <option value='King'>King</option>
                        <option value='Leo'>Leo</option>
                        <option value='Lion'>Lion</option>
                        <option value='liuzhen'>liuzhen</option>
                        <option value='Lucien'>Lucien</option>
                        <option value='Lucinda'>Lucinda</option>
                        <option value='lucy'>lucy</option>
                        <option value='Mark'>Mark</option>
                        <option value='Robin'>Robin</option>
                        <option value='Tim'>Tim</option>
                        <option value='Tony'>Tony</option>
                        <option value='Will'>Will</option>
                    </select>
                </div>
                &nbsp;&nbsp;&nbsp;部门：
                <div class="layui-inline">
                    <select id="xsDepartment">
                        <option value=''>请选择</option>
                        <option value='党政部'>党政部</option>
                        <option value='安平部'>安平部</option>
                        <option value='廊坊'>廊坊</option>
                        <option value='数字政府部'>数字政府部</option>
                        <option value='清欠办'>清欠办</option>
                        <option value='研发部门'>研发部门</option>
                    </select>
                </div>

                <button class="layui-btn" id="reloadBtn" >搜索</button>
                <button class="layui-btn" id="resetBtn" >重置</button>

                <form class="layui-form" style="float:right;" action="">
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <select id="weekNo" lay-filter="weekNo">
                                <option value=0>请选择要查询的周</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select id="quarter" lay-filter="quarter">
                                <option value="0">请选择时间周期</option>
                                <option value="0">全年</option>
                                <option value="1">一季度</option>
                                <option value="2">二季度</option>
                                <option value="3">三季度</option>
                                <option value="4">四季度</option>
                            </select>
                        </div>
                    </div>
                </form>
<br/>
                <a class="btn btn-warning" onclick="$.table.exportWeekCollect()" >
                    <i class="fa fa-download"></i> 导出各个周金额汇总表
                </a>
                <table class="layui-hide" id="layListId" lay-filter="layList"></table>
                <script type="text/html" id="toolbar">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm" lay-event="moneyBack">回款管理</button>
                        <button class="layui-btn layui-btn-sm" lay-event="totally">周汇总合计</button>

                    </div>
                </script>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var week = [[${week}]];
    console.log(ctx)
    var prefix = ctx + "system/weekly";
    $(function() {
        var options = {
            exportUrlWeekCollect: prefix + "/exportcontractWeekly",
            modalName: "应收详情表1"
        };
        $.table.init(options);
    });
    for(let i = 1; i < 54; i++){
        $('#weekNo').append(new Option('第' + i + '周', i));
    }
    function toPivot(i,id,no,name) {
        // var level = '项目级';
        // var type;
        // if(i < week){
        //     type = '实际';
        // } else {
        //     type = '预测';
        // }
        // var title = name + '(' + no + ')' + level + '第' + i + '周' + type + '回款表';

        // $.modal.openOptions(options);
        var data = {
            contractId : id,
            contractNo : no,
            contractName : name
        }
        openMoneyBack(data);
    }

    function openMoneyBack(data) { //打开回款管理模块
        $.modal.openOptions({
            title: '回款管理-' + data.contractName + '(' + data.contractNo + ')',
            width: "1280",
            btn: ['<i class="fa fa-close"></i> 关闭'],
            url: ctx + "system/contractDetail/moneyBack/" + data.contractId,
            callBack: function(index, layero) {
                layer.close(index);
            }
        });
    }
    layui.use(['table','form'], function() {
        var form = layui.form;
        form.on('select(quarter)', function (data) {
            if(data.value != ''){
                reload({});
            }
        });
        form.on('select(weekNo)', function (data) {
            reload({});
        });
        var quarter = $('#quarter').val();
        var table = layui.table;
        var columns =  new Array();

        getWeekByQuarter();
        table.render({
            elem: '#layListId',
            id: 'layTableId',
            url: 'contractWeekly',
            method: 'post',
            request: {
                pageName: 'pageNum' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            where: {
                quarter: '0',
                weekNo: $('#weekNo').val()
            },
            title: '项目回款预测周汇总',
            toolbar: '#toolbar', //开启头部工具栏，并为其绑定左侧模板
            defaultToolbar: ['filter', 'exports', 'print'],
            cellMinWidth: 100,
            cols: [
                columns
            ],
            page: true,
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.rows //解析数据列表
                };
            }
        });
        function getWeekByQuarter(){
            $.ajax({ //利用ajax去获取季度对应的周数，并根据周数生成表头
                url: ctx + "system/weekly/getWeekNoByQuarter?quarter=" + $('#quarter').val(),
                async: false, //必须设置成同步，否则表头出不来
                success: function(res){
                    columns.splice(0,columns.length);
                    columns.push({
                        type: 'checkbox',
                        fixed: 'left'
                    }, {
                        field: 'xsPrincipalName',
                        title: '销售人员',
                        fixed: 'left',
                        sort: true
                    }, {
                        field: 'contractNo',
                        title: '项目编号',
                        fixed: 'left',
                        width: 150,
                        sort: true
                    }, {
                        field: 'contractName',
                        title: '项目名称',
                        fixed: 'left',
                        width: 300
                    }, {
                        field: 'partyAName',
                        title: '客户',
                        fixed: 'left',
                        width: 200
                    }, {
                        field: 'balanceSince2020',
                        title: '20年期初余额',
                        fixed: 'left',
                        width: 150
                    });
                    let startWeek = res.startWeek;
                    let endWeek = res.endWeek;
                    //columns.splice(4, columns.length); //将前几列固定列保留，删除周数列
                    for(let i=1; i <= 53; i++){
                        let column = new Object();
                        if(i < startWeek || i > endWeek){
                            column.hide = true;
                        }
                        column.field = 'W' + i;
                        column.title = 'W' + i;
                        column.sort = true;
                        column.templet = '<div><a href="#" onclick="toPivot(' + i + ', \'{{d.contractId}}\',\'{{d.contractNo}}\',\'{{d.contractName}}\')" class="layui-table-link">{{d.W' + i + '}}</a></div>';
                        if(week == i){
                            column.style = 'background:#F0E68C';
                        }
                        columns.push(column);
                    }
                }});
        }

        function reload(){
            getWeekByQuarter();
            //执行重载
            table.render({
                elem: '#layListId',
                id: 'layTableId',
                url: 'contractWeekly',
                method: 'post',
                request: {
                    pageName: 'pageNum' //页码的参数名称，默认：page
                    ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
                },
                where: {
                    contractNo: $('#contractNo').val(),
                    contractName: $('#contractName').val(),
                    xsPrincipalName: $('#xsPrincipalName').val(),
                    xsDepartment: $('#xsDepartment').val(),
                    quarter: $('#quarter').val(),
                    weekNo: $('#weekNo').val()
                },
                title: '项目回款预测周汇总',
                toolbar: '#toolbar', //开启头部工具栏，并为其绑定左侧模板
                defaultToolbar: ['filter', 'exports', 'print'],
                cellMinWidth: 100,
                cols: [
                    columns
                ],
                page: true,
                parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.rows //解析数据列表
                    };
                }
            });

        }

        $('#reloadBtn').on('click', function(){
            reload();
        });
        $('#resetBtn').on('click', function(){
            $('#contractNo').val('');
            $('#contractName').val('');
            $('#xsPrincipalName').val('');
            $('#xsDepartment').val('');
            reload();
        });
        //监听工具条
        table.on('toolbar(layList)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event) {
                case 'moneyBack':
                    var data = checkStatus.data;
                    if(data.length === 1){
                        openMoneyBack(data[0]);
                    }else{
                        layer.msg('请选择一条数据');
                    }
                    break;
                case 'totally':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                default:
                    //layer.msg(data.contractName);
                    break;
            }
        });



    });
</script>
</body>
</html>